<template>
  <view class="container">
    <view class="content">
      <view class="header_txt">
        <view class="back"
              @click="backHandler">
          <image src="/static/img/back3.png"></image>
        </view>
        <view class="title"> 经验技巧详情 </view>
      </view>

      <view class="news_box">
        <view class="news_title">{{skillDetailList.name}}</view>
        <view class="news_time">{{skillDetailList.createtime}}</view>
        <view class="news_content">
          <view v-html="skillDetailList.content"></view>
        </view>
      </view>
      <view class="comment_box">
        <view class="comment_title">
          <view class="comment_line"></view>网友评论({{skillDetailList.comment_num}})
        </view>
        <view class="comment_item"
              v-for="item in skillCommentList"
              :key="item.id">
          <view class="comment_top_box">
            <view class="comment_top_l">
              <image :src="$serverIp+item.user.avatar"
                     mode=""></image>
              <view class="comment_top_info">
                <view class="comment_username">{{item.user.nickname}}</view>
                <view class="comment_time">{{item.createtime}}</view>
              </view>
            </view>
            <view class="comment_top_r"
                  @click="Report(item.id)">
              <image src="/static/image/zpzx_ico_jb@2x.png"
                     mode=""></image>
            </view>
          </view>
          <view class="comment_con">{{item.content}}</view>
        </view>
      </view>
      <view class="btm_box">
        <view class="input_box">
          <input type="text"
                 placeholder="请输入评论内容"
                 placeholder-class="input_class"
                 v-model="msg" />
          <view class="input_btn"
                @click="Fbcomment">发表</view>
        </view>
        <view class="coll_box">
          <image src="/static/image/sjxq_ico_sc_nor@2x.png"
                 mode=""
                 v-show="collect=='取消收藏成功'"
                 @click="collectSuccess"></image>
          <image src="/static/image/szrd_img_sc_sel@2x.png"
                 mode=""
                 v-show="collect=='收藏成功'"
                 @click="collectSuccess"></image>
          <view class="coll_tip">收藏</view>
        </view>
      </view>
    </view>
  </view>

</template>

<script>
export default {
  data() {
    return {
      skillDetailList: {},
      id: null,
      skillCommentList: [],
      msg: '',
      collect: '取消收藏成功'
    }
  },
  onLoad(options) {
    this.id = options.id
    this.getSkillDetailList(options.id)
    this.getSkillCommentList(options.id)
  },
  methods: {
    backHandler() {
      uni.navigateBack({
        delta: 1
      })
    },
    // zhang/Experience_skill/report_skill
    async Report(id) {
      const { data } = await this.$http.post('/zhang/Recruitinformation/report_info', { comment_id: id })
      console.log(data)
      if (data.code == 1) {
        uni.showToast({
          title: data.msg,
          icon: 'none',
          duration: 2000
        })
      }
    },
    //zhang/Experience_skill/collect_skill
    async collectSuccess() {
      const { data } = await this.$http.post('/zhang/Recruitinformation/collect_info', { info_id: this.id })
      console.log(data)
      if (data.code == 1) {
        this.collect = data.msg
        uni.showToast({
          title: data.msg,
          icon: 'none',
          duration: 2000
        })
      }
    },
    //zhang/Experience_skill/comment_skill
    async Fbcomment() {
      const { data } = await this.$http.post('/zhang/Recruitinformation/comment_info', { info_id: this.id, content: this.msg })
      console.log(data)
      this.getSkillCommentList(this.id)
      this.msg = ''
    },

    //zhang/Experience_skill/get_skill_detail
    async getSkillDetailList(id) {
      const { data } = await this.$http.post('/zhang/Recruitinformation/get_information_detail', { info_id: id })
      console.log(data)
      this.skillDetailList = data.data
    },

    //zhang/Experience_skill/get_skill_comment
    async getSkillCommentList(id) {
      const { data } = await this.$http.post('/zhang/Recruitinformation/get_info_comment', { info_id: id, page: 1, limit: 10 })
      console.log(data)
      this.skillCommentList = data.data
    }
  }
}
</script>

<style lang="scss">
/* 头部区域 */
.header_txt {
  width: 750rpx;
  overflow: hidden;
  height: 88rpx;
  background-color: #fff;

  .back {
    position: absolute;
    top: 14rpx;
    left: 14rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  .right {
    position: absolute;
    top: 14rpx;
    right: 14rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .title {
    text-align: center;
    width: 750rpx;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
}

.content {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.news_box {
  width: 100%;
  height: auto;
  padding: 30rpx 30rpx;
  background-color: #ffffff;
  margin-top: 20rpx;
}

.news_title {
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}

.news_time {
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  margin-top: 10rpx;
}

.news_content {
  margin-top: 30rpx;
  font-size: 28rpx;
  color: #333333;
}
.comment_box {
  width: 100%;
  height: auto;
  padding: 30rpx;
  margin-top: 28rpx;
  background-color: #ffffff;
  padding-bottom: 100rpx;
}
.comment_title {
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 29rpx;
}
.comment_line {
  width: 4rpx;
  height: 20rpx;
  background: #ffdd47;
  border-radius: 2rpx;
  margin-right: 10rpx;
}
.comment_item {
  margin-bottom: 40rpx;
}
.comment_top_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.comment_top_l {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.comment_top_l image {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.comment_top_r image {
  width: 30rpx;
  height: 26rpx;
}
.comment_username {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
.comment_time {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.comment_con {
  margin-top: 20rpx;
}
.btm_box {
  width: 100%;
  height: 98rpx;
  background: #ffffff;
  position: fixed;
  bottom: 0rpx;
  padding: 0 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1rpx solid #e5e5e5;
}
.input_box {
  width: 604;
  height: 58rpx;
  background: #f5f5f5;
  border-radius: 10rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
input {
  width: 464rpx;
  height: 100%;
  // padding: 0 21rpx;
  font-size: 26rpx;
}
.input_class {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.input_btn {
  width: 140rpx;
  height: 58rpx;
  background: linear-gradient(126deg, #ffdd47, #fcb630);
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}
.coll_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.coll_box image {
  width: 46rpx;
  height: 44rpx;
}
.coll_tip {
  font-size: 22rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
</style>

